<template>
  <div class="box">
    <h1>登录页面</h1>
    <div class="loginBox">
      <div class="lunbo">
        <el-carousel arrow="always">
          <el-carousel-item v-for="item in banner" :key="item">
            <img :src="item.img" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="box002">
        <el-radio-group v-model="labelPosition" label="label position" style="margin-left:55px ;">
          <el-radio-button label="left" max-width="100px" @change="phoneLogin"
            style="margin-top: 40px; width: 100px;margin-bottom: 10px">手机号登录</el-radio-button>
          <el-radio-button label="right" max-width="100px" @change="userLogin"
            style="margin-top: 40px; width: 100px;margin-bottom: 10px">使用ID登录</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px" />
        <el-form :label-position="labelPosition" label-width="40px" style="margin-left: 40px;" :model="formLabelAdmin">
          <el-form-item :label="loginType ? '用户' : '账号'" style="margin-bottom: 20px;">
            <el-input v-model="formLabelAdmin.name" :placeholder="loginType ? '请输入用户名' : '请输入手机号'" autocomplete="on" />
          </el-form-item>
          <el-form-item label="密码" style="margin-bottom: 40px;">
            <el-input v-model="formLabelAdmin.region" placeholder="请输入密码" type="password" :show-password="true"
              autocomplete="on" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
            <el-button @click="empty">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import service from '../utils/service';
import { reactive, ref } from 'vue';
import $router from "@/router/index";
import { ElMessage } from 'element-plus';
interface User {
  id: number,
  img: string
}
// 获取走马灯
const banner = reactive<User[]>([])
const loginType = ref(true)
const getbanner = async () => {
  let res = await service({
    url: `/imgs`
  })
  if (res.data) {
    banner.length = 0
    banner.push(...res.data)
    console.log("banner", banner);
  }
}
getbanner()
const labelPosition = ref('left')

const formLabelAdmin = reactive({
  name: '',
  region: '',
})
const formLabelPhone = reactive({
  name: '',
  region1: '',
})
// 登录请求
const onSubmit = async () => {
  if (formLabelAdmin.name != '' && formLabelAdmin.region != '') {
    if (labelPosition.value == "left") {
      console.log(1);
      let res = await service({
        url: `/phone`
      })
      if (formLabelAdmin.name == res.data[0].phn &&
        formLabelAdmin.region == res.data[0].pass) {
        sessionStorage.setItem("token", res.data[0].token)
        sessionStorage.setItem("phn", res.data[0].phn)
        $router.push("/Home")
        formLabelAdmin.name = ''
        formLabelAdmin.region = ''
      } else {
        ElMessage({
          type: "error",
          message: "手机号或密码错误!"
        })
      }
    }
    else if (labelPosition.value != "left") {
      console.log(1);
      let res = await service({
        url: `/ID`
      })
      if (formLabelAdmin.name == res.data[0].userID &&
        formLabelAdmin.region == res.data[0].pas) {
        sessionStorage.setItem("token", res.data[0].token)
        sessionStorage.setItem("userID", res.data[0].userID)
        $router.push("/Home")
        formLabelAdmin.name = ''
        formLabelAdmin.region = ''
      } else {
        ElMessage({
          type: "error",
          message: "手机号或密码错误！"
        })
      }
    }
  }
  else {
    ElMessage({
      type: "warning",
      message: "请输入用户名和密码！"
    })
  }
}
// 重置
const empty = () => {
  formLabelAdmin.name = ''
  formLabelAdmin.region = ''
}
const phoneLogin = () => {
  loginType.value = false
}
const userLogin = () => {
  loginType.value = true
}

document.onkeydown = (e) => {

  if (e.code === "Enter") {
    onSubmit()

  }
}
</script>
  
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  height: 100%;
  text-align: center;
  background-image: url("https://imgs.699pic.com/01/400/073/473/400073473.jpg!list2x.v1");
  background-repeat: no-repeat;
  background-size: 100%;
  position: fixed;
  top: 0;
}

h1 {
  margin-top: 80px;
  color: white;
}

.loginBox {
  width: 600px;
  height: 300px;
  background-color: rgba(160, 148, 148, 0.751);
  display: flex;
  border-radius: 15px;
  margin: 50px auto;
  overflow: hidden;
}

.lunbo {
  width: 250px;
  height: 100%;
  border-radius: 15px;
}

/*走马灯 */
.lunbo img {
  width: 100%;
  height: 100%;
  border-radius: 15px 0 0 15px;
}

.el-button {
  width: 80px;
  height: 35px;
  cursor: pointer;
}

:deep(.el-form-item__label) {
  color: #000;
}

.el-input {
  width: 200px;
}
</style>
  